<template>
  <up-overlay :show="show" @click="closeOverlay" @touchmove="stop">
    <div :class="show ? className + ' up-popup-content-show' : className  + ' up-popup-content-close'" @click.stop>
      <slot />
    </div>
  </up-overlay>
</template>

<script setup>
import UpOverlay from '../up-overlay/index.vue'
import { defineEmits, defineProps, onBeforeMount, ref, defineExpose } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  bgClick: {
    type: Boolean,
    default: true
  },
  round: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '250px'
  },
  position: {
    type: String,
    default: 'bottom'
  },
  lockScroll: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['update:show', 'update:width', 'update:height'])

const round = {
  borderRaduis: '0'
}
const className = ref('up-popup-content-show up-popup-content')
const animationShow = ref('toBottomShow')
const animationClose = ref('toBottomClose')
// 禁止背景滚动
const stop = () => {
  if (!props.lockScroll) return
  document.body.style.overflow = 'hidden'
}
// 开启背景滚动
const move = () => {
  document.body.style.overflow = ''
}
const changeShow = () => {
  emit('update:show', false)
  move()
}
const closeOverlay = () => {
  move()
  if (!props.bgClick) return
  emit('update:show', false)
}
defineExpose({ changeShow })
onBeforeMount(() => {
  if (props.round) {
    round.borderRaduis = '18px'
  }
  switch (props.position) {
    case 'top':
      className.value = className.value + ' up-popup-top'
      animationShow.value = 'toTopShow'
      animationClose.value = 'toTopClose'
      break
    case 'right':
      className.value = className.value + ' up-popup-right'
      animationShow.value = 'toRightShow'
      animationClose.value = 'toRightClose'
      break
    case 'bottom':
      className.value = className.value + ' up-popup-bottom'
      animationShow.value = 'toBottomShow'
      animationClose.value = 'toBottomClose'
      break
    case 'left':
      className.value = className.value + ' up-popup-left'
      animationShow.value = 'toLeftShow'
      animationClose.value = 'toLeftClose'
      break
    case 'center':
      className.value = className.value + ' up-popup-center'
      animationShow.value = 'toCenterShow'
      animationClose.value = 'toCenterClose'
      break
  }
})
</script>

<style>
.up-popup-content {
  width: v-bind('width');
  height: v-bind('height');
  overflow: hidden;
  font-size: 14px;
  background-color: #fff;
}

.up-popup-content-show {
  animation: v-bind('animationShow') 0.5s ease-in-out;
}

.up-popup-content-close {
  animation: v-bind('animationClose') 0.5s ease-in-out;
}

.up-popup-center {
  width: v-bind('width');
  height: v-bind('height');
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: v-bind('round.borderRaduis');
}
.up-popup-top {
  position: fixed;
  left: 0;
  top: 0;
  border-bottom-left-radius: v-bind('round.borderRaduis');
  border-bottom-right-radius: v-bind('round.borderRaduis');
}
.up-popup-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  border-top-left-radius: v-bind('round.borderRaduis');
  border-top-right-radius: v-bind('round.borderRaduis');
}
.up-popup-left {
  position: fixed;
  left: 0;
  top: 0;
  border-top-right-radius: v-bind('round.borderRaduis');
  border-bottom-right-radius: v-bind('round.borderRaduis');
}
.up-popup-right {
  position: fixed;
  right: 0;
  top: 0;
  border-top-left-radius: v-bind('round.borderRaduis');
  border-bottom-left-radius: v-bind('round.borderRaduis');
}

@keyframes toCenterShow {
  0% { transform: scale(0); }
  100% { transform: scale(100%); }
}

@keyframes toCenterClose {
  0% { transform: scale(100%); }
  100% { transform: scale(0); }
}

@keyframes toBottomShow {
  0% { bottom: -250px; }
  100% { bottom: 0; }
}

@keyframes toBottomClose {
  0% { bottom: 0; }
  100% { bottom: -250px; }
}

@keyframes toLeftShow {
  0% { left: -150px; }
  100% { left: 0; }
}

@keyframes toLeftClose {
  0% { left: 0; }
  100% { left: -150px; }
}

@keyframes toRightShow {
  0% { right: -150px; }
  100% { right: 0; }
}

@keyframes toRightClose {
  0% { right: 0; }
  100% { right: -150px; }
}

@keyframes toTopShow {
  0% { top: -250px; }
  100% { top: 0; }
}

@keyframes toTopClose {
  0% { top: 0; }
  100% { top: -250px; }
}
</style>
